<template>
    <div class="component-tab">
      <div class="tabs">
        <ul>
          <li v-for="(item,index) in tabs" :key="index" :class="{on:index===tabIndex}" @click="changeTabIndex(index)" :style="tabsWidth">
            <span>{{item}}</span>
          </li>
        </ul>
      </div>
      <div class="tab-wrapper">
        <div class="tab-container" :style="containerStyle">
          <slot></slot>
        </div>
      </div>
    </div>
</template>

<script>
    export default {
        name: "tab",
        props:{
          tabs:{
            type:Array,
            required:true
          }
        },
        data(){
          return {
            tabIndex:0,
          }
        },
        methods:{
          changeTabIndex(index){
            // console.log(index);
            let len = this.$props.tabs.length;
            if(index>=len){
              index = len-1;
              if(index<0){
                index = 0;
              }
            }

            this.$data.tabIndex = index;
          }
        },
        computed:{
            containerStyle(){
              let len = this.$props.tabs.length,
                  style = {
                    width:(len*100)+'vw'
                  };
              style.transform = 'translateX('+(-100*this.$data.tabIndex)+'vw)';
              return style;
            },
            tabsWidth(){
              let len = this.$props.tabs.length;
              let width = 100/(len==0?1:len);
              return {
                width:width+'vw',
                'box-sizing':'border-box'
              };
            }
        },

    }
</script>

<style scoped lang="less">
  .component-tab{
    width:100%;
    height:100%;
    position:relative;

    @tabHeight:3em;
    .tabs{
      height:@tabHeight;
      line-height:@tabHeight;
      background-color:#DF4338;
      color:#FADAD8;
      width:100%;
      position:absolute;
      top:0;
      left:0;
      z-index:10;

      ul{
        width:100%;
        height:100%;

        li{
          display:inline-block;
          max-width:100%;
          min-width:3em;
          padding:0 1em;
        }

        li.on{
          color:#fff;
        }
      }
    }

    .tab-wrapper{
      position:absolute;
      top:0;
      left:0;
      z-index:5;
      padding-top:@tabHeight;
      box-sizing:border-box;
      width:100%;
      height:100%;
      overflow:hidden;

      .tab-container{
        min-width:100%;
        height:100%;
        overflow-y:auto;
        transition:transform .3s;

        &:after{
          content:'';
          clear:both;
          display:block;
          width:0 !important;
          height:0 !important;
          overflow:hidden;
        }
      }
    }
  }
</style>
